<template>
	<view class="applicationStatus">
		<view class="content">
			<!-- <view class="header">
				<image :src="userInfo.avatar" mode=""></image>
				<view>{{userInfo.realName}}的工作室</view>
			</view> -->
			<view class="steps-container">
			   <view class="step" v-for="(item,index) in detail.list" :key="index">
			     <view class="step-line"></view>
			     <view class="step-circle"></view>
				 <view class="info">
					<view class="title">
						<view v-if="item.progressType == 0">【提交开通申请】</view>
						<view v-if="item.progressType == 1 || item.progressType == 2">【店长初审{{item.progressType == 1 ? '通过':'拒绝'}}】</view>
						<view v-if="item.progressType == 3 || item.progressType == 4">【平台终审{{item.progressType == 3 ? '通过':'拒绝'}}】</view>
						<view>{{item.createTime}}</view>
					</view>
					<view class="user" v-if="item.progressType == 0 || item.progressType == 5">
						<image :src="item.applyAvatar" mode=""></image>
						<view>{{item.applyNickName}}</view>
					</view>
					<view class="user" v-if="item.progressType == 1 || item.progressType == 2">
						<image :src="item.studioAvatar" mode=""></image>
						<view>{{item.managerNickName}}</view>
					</view>
					<view class="user" v-if="item.progressType == 3 || item.progressType == 4">
						<image src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-01.png" mode=""></image>
						<view>平台</view>
					</view>
					<view v-if="item.progressType == 4" class="payMoney">
						<view style="font-weight: bold;font-size: 30rpx;color: #1B2120;">平台终审不同意陪宠师开通申请</view>
						<view>申请信息：{{item.applicationInfoReason}}</view>
						<view>打款信息：{{item.payInfoReason}}</view>
					</view>
					<view v-if="item.progressType == 5" class="payMoney">
						<view style="font-weight: bold;font-size: 30rpx;color: #1B2120;">用户上传转款信息</view>
						<!-- <view>打款账号：{{JSON.parse(item.remark).paymentAccount}}</view> -->
						<view>打款时间：{{JSON.parse(item.remark).paymentTime}}</view>
					</view>
					<view class="remarks" v-if="item.remark">{{item.progressType == 5?JSON.parse(item.remark).remarks:item.remark}}</view>
					<!-- <view class="remarks" v-if="item.remark && (item.progressType ==5 || item.progressType ==4)">{{JSON.parse(item.remark).remarks}}</view> -->
					<view class="pics" v-if="item.remarkPic && item.remarkPic.length != 0">
						<image :src="picItem" mode="" v-for="(picItem,picIndex) in filterPic(item.remarkPic)" :key="picIndex" @click="previewImage(item.remarkPic)"></image>
					</view>
				 </view>
			   </view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { reactive, onMounted, ref } from 'vue'
	import api from '@/api';
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	onLoad((option) => {
		console.log(option)
		detail.info = option
	})
	
	const detail = reactive<{
		info:any
		list:any

	}>({
		info: {},
		list:[],
	})
	
	onMounted(async() => {
		await getInfo()
	})
	
	const previewImage = (image) => {
		let images = filterPic(image)
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	
	const filterPic= (item) => {
		return item.split(',')
	}
	
	const getInfo = async() => {
		const res = await api({
		   method: 'get',
		   url: `/mall/studio/apply-studio-progress/getApplyProgressRecord`,
		   data: {
				applyId:detail.info.applyId,
		   }
		})
		detail.list = res.data
	}
</script>

<style lang="scss" scoped>
	.payMoney{
		margin-top: 24rpx;
		view{
			font-size: 30rpx;
			color: #7C807F;
			margin-bottom: 16rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.applicationStatus{
		width: 100%;
		height: 100%;
		background-color: #F9F6F6;
		padding: 32rpx 32rpx calc(constant(safe-area-inset-bottom) + 64rpx) ;
		padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 64rpx); 
		box-sizing: border-box;
		.content{
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			.header{
				width: 100%;
				padding: 40rpx 0;
				font-size: 30rpx;
				color: #1B2120;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #E6E6E6;
				image{
					width: 64rpx;
					height: 64rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 16rpx;
				}
			}
			.info{
				.title{
					display: flex;
					align-items: flex-end;
					font-size: 30rpx;
					color: #1B2120;
					font-weight: 500;
					view{
						&:last-child{
							font-size: 26rpx;
							color: #7C807F;
						}
					}
				}
				.user{
					font-size: 30rpx;
					color: #7C807F;
					display: flex;
					align-items: center;
					margin-top: 24rpx;
					image{
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
				.remarks{
					font-size: 30rpx;
					color: #7C807F;
					margin-top: 34rpx;
					word-break:break-all;
					word-wrap:break-word; 
				}
				.pics{
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;
					image{
						width: 160rpx;
						height: 213rpx;
						margin: 0 20rpx 20rpx 0;
						&:nth-child(3n){
							margin: 0;
						}
					}
				}
			}
		}
	}
	.steps-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx 0 0;
	}

	.step {
		position: relative;
		/*width: 100%;*/
		padding-bottom: 70rpx;
		padding-left: 50rpx; /* 圆点左侧的间距 */
	}

	.step.active .step-circle {
		background-color: teal;
		color: #fff;
	}

	.step-line {
		position: absolute;
		top: 0;
		left: 12rpx; /* 线条左侧的位置 */
		width: 1rpx;
		height: 100%;
		background-color: #E4E6E6;
		z-index: 1;
	}

	.step:last-child .step-line {
		display: none; /* 最后一个步骤不需要线条 */
	}

	.step-circle {
		position: absolute;
		left: 0;
		top: 12rpx;
		transform: translateY(-50%);
		width: 24rpx;
		height: 24rpx;
		line-height: 24rpx;
		border-radius: 50%;
		background-color: #D0D1D2;
		text-align: center;
		z-index: 10;
		// font-size: 14px;
		// color: #333;
	}
</style>